<template>
  <div>
    <div class="ke__margin ke__bgfff">
      <div class="ke__padding">
        <k-search hidden-label>
          <div slot="prefix" class="ke__padding-right">
            <el-button size="small" type="primary" @click="onClickCreate">新建用户组</el-button>
          </div>

          <el-input placeholder="输入用户组名称搜索"
                    size="small"
                    v-model="search.key"
                    @keyup.enter.native="onClickSearch"
                    style="width: 400px"/>

          <k-search-box>
            <el-button type="info" size="small"
                       @click="onClickSearch"
                       icon="el-icon-search">搜索</el-button>
          </k-search-box>
        </k-search>

        <div class="ke__padding">
          <el-table :data="items" v-loading="loading">
            <el-table-column label="用户组名称">
              <template slot-scope="{ row }">
                <a href="javascript:;" class="ke__link" @click="$ke_router.push({ name: 'SafeGroupEdit', params: { id: row.id } })">
                  {{ row.name }}
                </a>
              </template>
            </el-table-column>

            <el-table-column label="备注" prop="remark"/>

            <el-table-column label="操作" width="260px" align="center">
              <template slot-scope="{ row }">
                <el-button type="text" @click="onClickAddMember(row)">添加组成员</el-button>

                <el-button type="text" @click="onClickAuth(row)">添加权限</el-button>

                <el-button type="text" @click="onClickDelete(row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>

    <group-user v-model="isShowUser"
                :id="actionId"
                type="group"
                :master="masterName"
    ></group-user>

    <group-auth v-model="isShowAuth"
                :id="actionId"
                type="group"
                :master="masterName"></group-auth>

    <group-create v-model="isShowCreate" @success="onInsertGroup"></group-create>
  </div>
</template>

<script>
import { Vue, Component } from 'vue-property-decorator'
import GroupCreate from '@/views/safe/group-create'
import GroupUser from '@/views/safe/group-user'
import GroupAuth from '@/views/safe/auth'
import KSearch from '@/components/KSearch'
import KSearchBox from '@/components/KSearchBox'
@Component ({
  components: { KSearchBox, KSearch, GroupCreate, GroupAuth, GroupUser }
})
export default class SafeGroup extends Vue {
  items = []
  total = 0
  loading = true
  search = {}
  isShowCreate = false
  isShowAuth = false
  actionId = 0
  isShowUser = false

  mounted () {
    this.getList()
  }

  // 操作主体名称
  get masterName() {
    const idx = this.items.findIndex(item => item.id === this.actionId)
    if (idx === -1) {
      return ''
    }
    return this.items[idx].name
  }

  getList () {
    this.loading = true
    this.$http.get('admin/safe/groups', {
      page: this.page,
      ...this.search
    })
      .finally(() => this.loading = false)
      .then(result => {
        if (result.res_code === 0) {
          this.items = result.list.map(item => {
            return item
          })
          this.total = result.total
        }
      })
  }

  onClickRefresh () {}

  onClickSearch () {
    this.page = 1
    this.items = []
    this.total = 0
    this.getList()
  }

  // 添加组成员
  onClickAddMember(row) {
    this.actionId = row.id
    this.isShowUser = true
  }

  // 添加权限
  onClickAuth (row) {
    this.actionId = row.id
    this.isShowAuth = true
  }

  // 新建用户
  onClickCreate () {
    this.isShowCreate = true
  }

  // 插入新用户组
  onInsertGroup (row) {
    this.items.unshift({ ...row })
  }

  // 删除用户
  async onClickDelete (row) {
    await this.$confirm('确认删除用户组?')
    const load = this.$loading({
      text: '删除中'
    })
    this.$http.delete('admin/safe/group', { id: row.id })
      .finally(() => {
        load.close()
      })
      .then(result => {
        if (result.res_code === 0) {
          this.$message.success('删除成功')
          this.getList()
        } else {
          this.$message.error(result.res_msg)
        }
      })
  }
}
</script>

<style scoped lang="scss">

</style>
